<!-- 资讯服务 -->
<template>
  <div class="horizontal-tab">

    <div class="breadcrumb"  v-if="this.$route.query.item.title !== ''">
      您当前的位置：
      <span>资讯服务 > </span>&nbsp;
      <span style="color:#39ADFF;cursor:default"  @click="topreviousPath">{{this.$route.query.item.title}}</span>&nbsp;>&nbsp;
      <span>详情</span>
    </div>

    <div class="horizontal-tab-con">
      <div class="horizontal-con">
        <div class="horizontal-span">
          <!-- id 锚点 -->
          <h4 v-if="this.$route.query.item.title !== ''">{{this.$route.query.item.title}}</h4>

          <div v-if="this.$route.query.item.abstracts" class="horizontal-span-con-abstracts">
            <p><b>摘要：</b> {{this.$route.query.item.abstracts}}</p>
          </div>

          <div class="horizontal-span-con">
            <p v-html="contentDataCon"></p>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  name: 'Consultation_detail',
  data () {
    return {
      contentDataCon: ''
    }
  },
  components: {},
  computed: {},
  created () {
    this._getContentDesc()
  },
  mounted () {},
  methods: {
    // previousCon (id) {
    //   this.$emit('previousCon', id)
    // },
    // nextCon (id) {
    //   this.$emit('nextCon', id)
    // },
    topreviousPath () {
      this.$router.go(-1)
    },
    _getContentDesc () {
      this.$http.get(`/v1/contentDesc/${this.$route.query.item.contentId}`).then(res => {
        this.contentDataCon = res.contentHtml
      })
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.breadcrumb {
  padding 20px 0 20px 15%
  display flex
  align-items center
  margin-bottom 20px
  box-shadow 0 0 10px 2px #ddd
}

.horizontal-span-con-abstracts {
  background #FAF7E5
  text-align left
  padding 10px
  font-size 14px
  line-height 2
}

.horizontal-tab-con {
  display flex
  flex-direction column
  align-items center
  justify-content center
  .horizontal-con {
    width 1000px
    border-top 1px solid #ddd
    padding 15px
    display flex
    flex-direction column
    .horizontal-span {
      text-align center
      line-height 1.5
      h4 {
        font-size 22px
        padding 10px
      }
      .horizontal-span-con {
        text-align left
        p {
          line-height 2
          padding 20px 10px 10px
          text-indent 30px
        }
      }
    }
  }
}

</style>
